<template>
	<view class>
		<view class="headImage">
			<image
				src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/bdb8d058e8f7488c4b5f88527e18d6e3.jpeg?Expires=1940391904&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=yy9K%2F91xLGWx7A4K%2FCzOJC%2FBtmc%3D"
				mode=""></image>
		</view>
		<view class="headWords">
			<text space="nbsp">
				万承志堂始创于1875年,距今已有一百四十六年,史称"杭城药业三门市",以“做药务真,不得欺客;行医务正,不得欺世”为祖训。万承志堂由中国国医大师葛琳仪担任顾问,汇聚了200多位专家名医,先后获得中华老字号、金牌老字号、浙江省级非物质文化遗产等荣誉。</text>
		</view>
		<view class="division"></view>
		<view class="myContent">
			<view class="mainFunction uni-flex uni-row">
				<view class="oneFunction" @tap="toPinTuan()">
					<image
						src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/8bb3f760bd25dd9842c2bb3fd6c51ff4.png?Expires=1933209657&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=UDn9jUoG5N/fKHD8vIepzehPGCg="
						mode=""></image>
					<view class="funName">抢专家号</view>
					<view class="funDescription">稀缺专家号</view>
				</view>
				<view class="oneFunction">
					<image
						src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/b9b893230c2eb1eb44185a395a0bbb15.png?Expires=1934343299&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=g0J6Gz9MSgfHHPbuFLKMpaG2nwY="
						mode=""></image>
					<view class="funName">在线咨询</view>
					<view class="funDescription">在线问诊</view>
				</view>
				<view class="oneFunction">
					<image
						src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/093e9330a926d2cf8e5985430939da2b.png?Expires=1933209805&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=qKrPOwACVGP1BvVfN9UzXaxMG70="
						mode=""></image>
					<view class="funName">联盟机构</view>
					<view class="funDescription">申请加入联盟</view>
				</view>
			</view>
			<view class="specials">
				<view class="specials-title">
					特色咨询
				</view>
				<view class="specials-content">
					<view class="specials-content-block">
						<image class="specials-content-block-img"
							src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/b7a08ee0938f26b8abd5f096af33d180.png?Expires=1941335802&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=V6vUAnbAd1IJIgUwidnWojPI%2FHM%3D"
							mode=""></image>
						<text>便秘排毒咨询</text>
						<text>便秘排毒</text>
					</view>
					<view class="specials-content-block">
						<image class="specials-content-block-img"
							src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/e70ad6e78924fcc29eb23b1fabb77380.png?Expires=1937116807&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=%2BKCWAp6IvMYVxYAILokN2RrnH3w%3D"
							mode=""></image>
						<text>秘制美容美颜</text>
						<text>美容美颜</text>
					</view>
				</view>
				<view class="specials-content">
					<view class="specials-content-block">
						<image class="specials-content-block-img"
							src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/d9b32e6fe7e23c7f0664f13c090e44ec.png?Expires=1937116977&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=Ug4Rx5dTIEsmYHDreuKd%2BxmGCyQ%3D"
							mode=""></image>
						<text>益智咨询</text>
						<text>促智催智</text>
					</view>
					<view class="specials-content-block">
						<image class="specials-content-block-img"
							src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/72b89f448e1adf37a991b35aa6ddaced.png?Expires=1937117058&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=Ka3avltZhNsUUwMyCrdEwF93mzM%3D"
							mode=""></image>
						<text>口腔溃疡咨询</text>
						<text>口腔咨询</text>
					</view>
				</view>
				<view class="specials-content">
					<view class="specials-content-block">
						<image class="specials-content-block-img"
							src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/9e5c2ff7cf05c44c8a05ee25af1df4b9.png?Expires=1937117180&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=Aj9IYcEuLsmI%2F96Bf1B%2FZViSxfw%3D"
							mode=""></image>
						<text>咽炎咨询</text>
						<text>咽炎</text>
					</view>
					<view class="specials-content-block">
						<image class="specials-content-block-img"
							src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/3495aff28718243f6e5d58be4770b657.png?Expires=1937117381&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=zxW561M5CaJsM2uK1qIg2dxOUp0%3D"
							mode=""></image>
						<text>痛经咨询</text>
						<text>痛经咨询</text>
					</view>
				</view>
			</view>
			<view class="news">
				<view class="news-left">
					<image src="../../static/image/newsTitle.png" mode=""></image>
				</view>
				<view class="news-right">
					<view class="news-right-top">
						<view class="news-right-top-word">
							<view class="news-right-top-title">热</view>
						</view>
						<view class="news-right-top-content">万承志堂中医馆省级名中医邬成霖可开始拼团啦!</view>
					</view>
					<view class="news-right-bottom">
						<view class="news-right-bottom-word">
							<view class="news-right-bottom-title">新</view>
						</view>
						<view class="news-right-bottom-content">
							<swiper class="swiper" autoplay="true">
								<swiper-item id="item1">
									<view class="news-right-top-content">女星整容变毁容,为了美可以多"疯狂"? </view>
								</swiper-item>
								<swiper-item id="item2">
									<view class="news-right-top-content">睡眠不足?神经衰弱怎么办</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-left">
					<image
						src="https://wcztjob.oss-cn-hangzhou.aliyuncs.com/f3764885b3843bf18f3433f196fc5508.png?Expires=1929863018&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=YMyE1KxH02XJZrrnWMtKMtYTxQo="
						mode="heightFix"></image>
				</view>
				<view class="bottom-right">
					<view class="bottom-right-text">
						万嗣轩公的父亲夙以利济苍生为心,恒思设药馆之所,萃远方珍异之品,按随时配制之方,以待用无遗,而百姓回生有恃。为承,先父开办药馆济世救人的遗志,万嗣轩公于清光绪初年公元1875年,创建了当时杭城著名的药馆，起名为“承志堂”。因是万家人创办，世称“万承志堂”。
					</view>
				</view>
			</view>
			<view class="bottom-bottom">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				specialUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.tFM0-WSLWpNt7jv8sfweaAHaFj?w=248&h=186&c=7&o=5&dpr=1.25&pid=1.7'
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			})

			uni.hideLoading()
		},

		methods: {
			toPinTuan() {
				uni.navigateTo({
					url: '/pages_pintuan/qiangzhuanjia_list/qiangzhuanjia_list'
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.headImage {
		width: 100vw;
		height: 200rpx;
	}

	.headImage image {
		width: 100%;
		height: 200rpx;

	}

	.myContent {
		background: linear-gradient(to bottom, #FDFDFD, #EEEEEE);
	}

	.headWords {
		margin: 20rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		text-indent: 2em;
		color: #333333;
	}

	.division {
		/* 分割线 下方内容区和上方文字图片区的中间黑线 */
		background: #EEEEEE;
		height: 6rpx;
	}


	.mainFunction {
		display: flex;
		flex-direction: row;
		background: #FBFBFB;
		padding: 40rpx 10rpx;

	}

	.mainFunction view:nth-of-type(1) {
		flex: 1;
	}

	.mainFunction view:nth-of-type(2) {
		flex: 1;
	}

	.mainFunction view:nth-of-type(3) {
		flex: 1;
	}

	.oneFunction {
		display: flex;
		align-items: center;
		/**子view垂直居中*/
		vertical-align: center;
		/**垂直居中*/
		justify-content: center;
		/**内容居中*/
		flex-direction: column;
	}

	.oneFunction image {
		border-radius: 30rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.funName {
		margin-top: 20rpx;
		color: #333333;
		font-size: 30rpx;
	}

	.funDescription {
		color: #A3A3A3;
		font-size: 24rpx;
	}

	.specials {
		margin: 0 20rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
	}

	.specials-title {
		font-size: 30rpx;
		color: #151515;
		margin: 0 0 24rpx 24rpx;
		padding-top: 30rpx;
	}

	.specials-content {
		margin: 14rpx;
		padding: 0 20rpx;
		display: flex;
		flex-direction: row;
		border-radius: 6rpx;
	}

	.specials-content-block {
		margin: 8rpx;
		flex: 1;
		display: flex;
		width: 300rpx;
		height: 124rpx;
		border-radius: 4rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0rpx rgba(0, 0, 0, 0.15);
		background-repeat: no-repeat;
	}

	.specials-content-block-img {
		width: 300rpx;
		height: 124rpx;
		flex: 1;
	}

	.specials-content-block text:nth-child(2) {
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #333333;
		position: absolute;
		top: 10rpx;
		left: 14rpx;
	}

	.specials-content-block text:nth-child(3) {
		margin-top: 4rpx;
		margin-left: 10rpx;
		color: #999999;
		font-size: 20rpx;
		position: absolute;
		top: 60rpx;
		left: 14rpx;
	}

	.news {
		margin: 10rpx 20rpx;
		height: 114rpx;
		border-radius: 16rpx;
		background: #FFFFFF;

		display: flex;
		flex-direction: row;
		overflow: hidden;
		align-items: center;
		/**子view垂直居中*/
		vertical-align: center;
		/**垂直居中*/
		justify-content: center;

	}

	.news-left {
		margin-left: 24rpx;
		width: 88rpx;
		height: 88rpx;
	}

	.news-left image {
		width: 100%;
		height: 100%;
	}

	.news-right {
		margin: 10rpx 20rpx;
		flex: 1;
	}

	.news-right-top {
		display: flex;

	}

	.news-right-top-word {
		border-radius: 4rpx;
		overflow: hidden;

		display: flex;
		justify-content: center;
		align-items: center;
		vertical-align: center;
		width: 30rpx;
		margin-right: 10rpx;
		background: #75161B;
	}

	.news-right-top-title {
		text-align: center;
		font-size: 26rpx;
		color: white;
	}

	.news-right-top-content {

		font-size: 20rpx;
		line-height: 20rpx;
		align-items: center;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.news-right-bottom {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;

		align-items: center;
		/**子view垂直居中*/
		vertical-align: center;
		/**垂直居中*/
		justify-content: center;


	}

	.news-right-bottom-word {
		border-radius: 4rpx;
		overflow: hidden;

		display: flex;
		justify-content: center;
		align-items: center;
		vertical-align: center;
		width: 30rpx;
		margin-right: 10rpx;
		background: #4A7FCE;

	}

	.news-right-bottom-title {
		text-align: center;
		font-size: 26rpx;
		color: white;

	}

	.news-right-bottom-content {
		height: 28rpx;
		flex: 1;
	}

	.swiper {
		height: 28rpx;
	}

	#item1,
	#item2,
	#item3 {
		width: 100%;
		height: 100%;
		font-size: 20rpx;
		line-height: 20rpx;
		display: flex;
		align-items: center;
		vertical-align: center;
	}

	.bottom {
		margin: 10rpx 20rpx 30rpx 20rpx;
		height: 450rpx;
		display: flex;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;

	}

	.bottom-left {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.bottom-right {
		flex: 1;
		position: relative;
	}

	.bottom-right-text {
		font-size: 22rpx;
		line-height: 34rpx;
		position: absolute;
		left: 10%;
		right: 10%;
		top: 12.5%;
	}

	.bottom-bottom {
		height: 2rpx;
	}
</style>
